<template>
  <div class="active-content">
    <el-row>
      <el-col :span="24">
        <el-form :model="phone" :rules="rules2" ref="phoneValidateForm">
          <div class="user-form">
            <div class="form-item">
              <div class="title-a">修改手机号码</div>
            </div>

            <div class="form-item">
              <div class="item-title">新手机号</div>
              <el-form-item prop="newPhone" class="output">
                <el-input placeholder="请输入新手机号" v-model="phone.newPhone">
                  <template slot="prepend"><div class="phone-line"></div>+86</template>
                </el-input>
              </el-form-item>
            </div>
            <div class="form-item">
              <div class="item-title">验证码</div>
              <el-form-item prop="phoneCode" class="output">
                <el-input placeholder="请输入原手机验证码" v-model="phone.phoneCode">
                  <el-button slot="append" v-show="verShow" @click="sendPhoneCode"><div class="code-line"></div>获取验证码</el-button>
                  <el-button slot="append" v-show="!verShow" ><div class="code-line"></div>{{timer}}s</el-button>
                </el-input>
              </el-form-item>
              <div class="item-btn">
                <el-button type="primary" @click="onSubmit('phoneValidateForm')">确定</el-button>
              </div>
            </div>
          </div>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-form :model="password" :rules="rules2" ref="passwordValidateForm">
          <div class="user-form">
            <div class="form-item">
              <el-col :span="24">
                <el-col :span="3">
                  <div class="title-a">更改登录密码</div>
                </el-col>
              </el-col>
            </div>
            <div class="form-item">
              <div class="item-title">新密码</div>
              <el-form-item prop="oldPass" class="output">
                <el-input v-model="password.oldPass" type="password" placeholder="请输入新密码"></el-input>
              </el-form-item>
            </div>
            <div class="form-item">
              <div class="item-title">确认密码</div>
              <el-form-item prop="newPass" class="output">
                <el-input v-model="password.newPass" type="password" placeholder="请输入确认密码"></el-input>
              </el-form-item>
              <div class="item-btn">
                <el-button type="primary" @click="onSubmit('passwordValidateForm')">确定</el-button>
              </div>
            </div>
          </div>
        </el-form>

      </el-col>
      <el-col :span="24">
        <div class="user-form">
          <div class="form-item">
            <el-col :span="24">
              <el-col :span="3">
                <div class="title-a">微信信息</div>
              </el-col>
            </el-col>
          </div>
          <div class="form-item">
            <div class="item-title" style="visibility: hidden;">微信信息</div>
            <el-col :span="6">
              <div class="item-in">
                <img :src="wechatImg" class="item-in-img">
                <span class="item-in-left">{{wechatName}}</span>
              </div>
            </el-col>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import wechatImg from "../../assets/img/weixin@2x.png";
  import * as commonApi from "api/common";

  export default {
    name: "account",
    components:{},
    data(){
      // <!--验证手机号是否合法-->
      let checkTel = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号码'))
        } else if (!this.checkMobile(value)) {
          callback(new Error('手机号码不合法'))
        } else {
          callback()
        }
      }
      let checkPass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value != this.password.oldPass) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      }
      return {
        wechatImg: null,
        wechatName: null,
        phone: {
          // oldPhone: "",
          newPhone: "",
          phoneCode: "",
        },
        password: {
          oldPass: '',
          newPass: '',
        },
        rules2: { // form 表单验证
          // oldPhone: [
          //   {validator: checkTel, trigger: 'change' }
          // ],
          newPhone: [
            {validator: checkTel, trigger: 'blur' }
          ],
          phoneCode: [
            {required: true, message: '验证码不能为空', trigger: 'change' }
          ],
          oldPass: [
            {required: true, message: '密码不能为空', trigger: 'change' },
            {pattern: /^(\w){5,10}$/, message: '只能输入5-10个字母、数字、下划线'}
          ],
          newPass: [
            {validator: checkPass2, trigger: 'change' }
          ],
        },
        verShow: true, //验证码显示控制
        timer: 60, //验证码重新获取倒计时
      }
    },
    created() {
      this.getWechat()
      console.log('----------account created-------------')
    },
    mounted() {
      console.log('----------account mounted-------------')
    },
    methods: {
      onSubmit(formName){ //
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (formName === 'phoneValidateForm') { //更新手机
              this.updatePhone()
            } else if (formName === 'passwordValidateForm'){ //更新密码
              this.updatePass()
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      sendPhoneCode() { //发送手机短信验证
        this.$refs.phoneValidateForm.validateField('newPhone' ,valid => { //单个字段检验
          if(!valid){
            let user = JSON.parse(sessionStorage.getItem("user"))
            let userId = user.userId

            commonApi.sendUserPhoneCode(userId, 1).then(res => {
              let { data } = res;
              if (data.status === 200) {
                this.verShow = false
                var auth_timer = setInterval(()=>{ //倒计时
                  this.timer--
                  if(this.timer<=0){
                    this.verShow = true
                    this.timer = 60
                    clearInterval(auth_timer)
                  }
                },1000)
              } else {
                this.$msg({text: data.msg, type: 'error'})
              }
            })
          }
        })
      },
      updatePhone(){ //更新手机号码
        let user = JSON.parse(sessionStorage.getItem("user"))
        let userId = user.userId
        const params = {
          userId: userId,
          code: this.phone.phoneCode,
          phone: this.phone.newPhone,
        }
        commonApi.updatePhone(params).then(res => {
          let { data } = res;
          if (data.status === 200) {
            this.$emit('reload','third');
            this.$msg({text: '修改成功！！', type: 'success'})
          } else {
            this.$msg({text: data.msg, type: 'error'})
          }
        })
      },
      updatePass(){ //更新密码
        let user = JSON.parse(sessionStorage.getItem("user"))
        let userId = user.userId
        const params = {
          userId: userId,
          password: this.password.newPass,
        }
        commonApi.updatePass(params).then(res => {
          let { data } = res;
          if (data.status === 200) {
            this.$emit('reload','third');
            this.$msg({text: "修改成功", type: 'success'})
          } else {
            this.$msg({text: data.msg, type: 'error'})
          }
        })
      },
      getWechat(){
        let user = JSON.parse(sessionStorage.getItem("user"))
        let userId = user.userId
        const params = {
          userId: userId
        }
        commonApi.getWechat(params).then(res => {
          let { data } = res;
          if (data.status === 200) {
            if (data.data != null && data.data != undefined){
              this.wechatImg = data.data.wechatHeadImg
              this.wechatName = data.data.wechatName
              return
            }
          }
          this.wechatImg = wechatImg
          this.wechatName = "暂未绑定"
        })
      },
      // 验证手机号
      checkMobile(str) {
        let re = /^1\d{10}$/
        if (re.test(str)) {
          return true;
        } else {
          return false;
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";
  @media screen and (max-width: 1600px){
    .active-content{
      .user-form{
        font-size: 14px;
        font-weight: 500;
        color: $baseFontColor;
        .form-item:first-child{
          padding: 0;
        }
        .form-item{
          height: 35px;
          padding: 10px 0;
          display: flex;
          .title-a{
            width: 120px;
            text-align: right;
            font-size: 14px;
            font-weight: 600;
            color: $baseFontColor;
            padding: 5px 30px 0 0;
          }
          /*输入标题*/
          .item-title{
            width: 120px;
            text-align: right;
            font-size: 13px;
            font-weight: 500;
            color: #999999;
            padding: 10px 30px 10px 0;
          }
          /*输入框*/
          .output{
            width: 280px;
            /*手机号 +86框*/
            /deep/ .el-input-group__prepend{
              background: #F7F7FA;
              border: 1px solid #FFFFFF;
            }
            /*获取验证码按钮*/
            /deep/ .el-input-group__append, .el-input-group__prepend{
              background: #F7F7FA;
              border: 1px solid #FFFFFF;
            }
            .el-input{
              height: 40px;
            }
            .el-form-item__content{
              .phone-line{
                position: absolute;
                width: 1px;
                height: 25px;
                border-right: 1px solid #CCCCCC;
                top: 7px;
                left: 66px;
              }
              .code-line{
                position: absolute;
                width: 1px;
                height: 25px;
                border-right: 1px solid #CCCCCC;
                top: 7px;
                left: -2px;
              }
            }
          }
          /*微信绑定信息*/
          .item-in{
            padding: 0 20px;
            .item-in-img{
              width: 40px;
              height: 40px;
              border-radius: 50%;
              float: left;
            }
            .item-in-left{
              line-height: 50px;
              color: #666666;
              font-size: 14px;
              font-weight: 500;
              margin-left: 20px;
            }
            .item-in-right{
              line-height: 50px;
              color: #666666;
              font-size: 14px;
              font-weight: 500;
              float: right;
            }
          }
          /*按钮*/
          .item-btn{
            button{
              width:110px;
              height:40px;
              border-radius: 4px;
              margin-left: 80px;
            }
          }
        }

        /deep/ .el-input__inner{
          background: #F7F7FA;
          border: 1px solid #FFFFFF;

        }
        /deep/ .el-form-item.is-error .el-input__inner{
          border-color: #F56C6C;
        }

      }
    }
  }
  @media screen and (min-width: 1600px){
    .active-content{
      .title-a{
        width: 120px;
        text-align: right;
        font-size: 14px;
        font-weight: 600;
        color: $baseFontColor;
        padding: 5px 30px 0 0;
      }
      .user-form{
        font-size: 14px;
        font-weight: 500;
        color: $baseFontColor;
        .form-item:first-child{
          padding: 0;
        }
        .form-item{
          height: 50px;
          padding: 10px 0;
          display: flex;
          /*输入标题*/
          .item-title{
            width: 120px;
            text-align: right;
            font-size: 14px;
            font-weight: 500;
            color: #999999;
            padding: 10px 30px 10px 0;
          }
          /*输入框*/
          .output{
            width: 300px;
            /*手机号 +86框*/
            /deep/ .el-input-group__prepend{
              background: #F7F7FA;
              border: 1px solid #FFFFFF;
            }
            /*获取验证码按钮*/
            /deep/ .el-input-group__append, .el-input-group__prepend{
              background: #F7F7FA;
              border: 1px solid #FFFFFF;
            }
            .el-input{
              height: 40px;
            }
            .el-form-item__content{
              .phone-line{
                position: absolute;
                width: 1px;
                height: 25px;
                border-right: 1px solid #CCCCCC;
                top: 7px;
                left: 66px;
              }
              .code-line{
                position: absolute;
                width: 1px;
                height: 25px;
                border-right: 1px solid #CCCCCC;
                top: 7px;
                left: -2px;
              }
            }
          }
          /*微信绑定信息*/
          .item-in{
            padding: 0 20px;
            .item-in-img{
              width: 40px;
              height: 40px;
              border-radius: 50%;
              float: left;
            }
            .item-in-left{
              line-height: 50px;
              color: #666666;
              font-size: 14px;
              font-weight: 500;
              margin-left: 20px;
            }
            .item-in-right{
              line-height: 50px;
              color: #666666;
              font-size: 14px;
              font-weight: 500;
              float: right;
            }
          }
          /*按钮*/
          .item-btn{
            button{
              width:144px;
              height:40px;
              border-radius: 4px;
              margin-left: 100px;
            }
          }
        }
        /deep/ .el-input__inner{
          background: #F7F7FA;
          border: 1px solid #FFFFFF;
        }
        /deep/ .el-form-item.is-error .el-input__inner{
          border-color: #F56C6C;
        }


      }
    }
  }

</style>
